<template>
  <div class="container">
    <a-row :gutter="20">
      <a-col :span="4">
        <a-tree ref="orgUserTreeRef" :fieldNames="{ key: 'id',title: 'label'}" :data="state.treeData" @select="treeClick"></a-tree>
      </a-col>
      <a-col :span="20">
        <User :key="'user' + state.activeOrgId" :orgId="state.activeOrgId"></User>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent, nextTick} from "vue";
// 引入组件
const User = defineAsyncComponent(() => import('@/views/sys/user/user.vue'));

// 定义dom
const orgUserTreeRef = ref(null);
const state = reactive({
  treeData :[],
  activeOrgId:0,
})
const loadOrgTree = () =>{
  axios.post('/sys/org/orgtreedata', {orgId : 1}).then(res => {
    const { data } = res
    state.treeData = data
    if(state.treeData.length > 0){
      state.activeOrgId = parseInt(state.treeData[0].id)
      nextTick(()=>{
        orgUserTreeRef.value.selectNode(state.treeData[0].id)
        orgUserTreeRef.value.expandAll()
      })
    }
  })
}
const treeClick = (newSelectedKeys, event)=>{
  state.activeOrgId = parseInt(event.node.id)
}
onMounted(()=>{
  loadOrgTree();
})
</script>

<style scoped>

</style>
